<template>
  <el-drawer
    :visible.sync="show"
    :with-header="false"
    :direction="direction"
    :wrapperClosable="false"
  >
    <div class="drawer-title">
      <div class="drawer-title-left">新增 | {{ questionTitle }}</div>
      <div class="drawer-title-right" @click="closeDrawer">
        <i class="el-icon-close" style="font-size: 14px; color: #a4afca"></i>
      </div>
    </div>
    <div
      class="drawer-content"
      style="
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 200px;
      "
    >
      <div
        v-for="(item, index) in cList"
        class="drawer-content-item"
        :key="index"
      >
        <div class="drawer-content-item-top">
          <p style="color: #999999">{{ index + 1 }} /</p>
          <p style="color: #bfc7da">{{ cList.length }}</p>
          <img src="../../assets//images/kssc.png" />
        </div>
        <div class="drawer-content-item-tm">
          <img src="../../assets/images/timu1.png" />
          <p>题目</p>
        </div>
        <div class="drawer-content-item-cont">
          <el-input
            type="textarea"
            v-model="item.cont"
            :rows="7"
            placeholder="请输入题目内容"
          ></el-input>
        </div>
        <div class="drawer-content-item-tm1">
          <img src="../../assets/images/da.png" />
          <p>答案</p>
        </div>
        <div class="drawer-content-item-da">
          <p>填空1</p>
          <el-input v-model="item.bq" placeholder="请输入答案内容"></el-input>
        </div>

        <div class="drawer-content-item-tm1">
          <img src="../../assets/images/tmbq.png" />
          <p>题目标签</p>
        </div>
        <div class="drawer-content-item-bq">
          <el-input v-model="item.bq" placeholder="请输入题目标签"></el-input>
        </div>

        <div class="drawer-content-item-tm1">
          <img src="../../assets/images/tggjz.png" />
          <p>题干关键字</p>
        </div>
        <div class="drawer-content-item-bq">
          <el-input
            v-model="item.keyword"
            placeholder="请输入题目标签"
          ></el-input>
        </div>

        <div class="drawer-content-item-tm1">
          <img src="../../assets/images/nd.png" />
          <p>难度</p>
        </div>
        <div class="drawer-content-item-nd">
          <div class="nd-1"></div>
          <div class="nd-2"></div>
          <div class="nd-3"></div>
        </div>
      </div>
    </div>
    <div class="drawer-bottom-add">
      <i class="el-icon-plus"></i>
      <p>继续添加</p>
    </div>

    <div class="drawer-bottom-btn">
      <el-button>保存</el-button>
      <el-button type="primary">提交</el-button>
    </div>
  </el-drawer>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cList: [
        {
          cont: "",
          isOk: true,
          bq: "",
          keyword: "",
        },
        {
          cont: "",
          isOk: true,
          bq: "",
          keyword: "",
        },
      ],
      direction: "rtl",
      questionTitle: "填空题",
    };
  },
  methods: {
    closeDrawer() {
      this.$emit("closeDrawer", false);
    },
  },
};
</script>
<style scoped lang="scss">
.drawer-draw {
  position: relative;
}
.drawer-content-item {
  width: 100%;
  height: auto;
  border: 1px solid #e2e7f5;
  box-sizing: border-box;
  padding: 24px;
  position: relative;
  .drawer-content-item-top {
    position: absolute;
    display: flex;
    right: 0;
    top: 0;
    p {
      margin-top: 3px;
      font-size: 18px;
      margin-right: 4px;
    }
  }
  .drawer-content-item-tm {
    display: flex;
    p {
      font-size: 16px;
      margin-left: 8px;
    }
  }
  .drawer-content-item-cont {
    display: flex;
    margin-top: 8px;
  }
  .drawer-content-item-da {
    font-size: 16px;
    margin-top: 10px;
    display: flex;
    p {
      width: 60px;
      margin-top: 6px;
    }
  }
  .drawer-content-item-bq {
    margin-top: 10px;
  }
  .drawer-content-item-nd {
    margin-top: 10px;
    display: flex;
    .nd-1 {
      flex: 1;
      width: 100%;
      height: 12px;
      background-color: #bcd0f9;
      transform: skew(-30deg);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 创建一个矩形 */
    }
    .nd-2 {
      flex: 1;
      margin-left: 10px;
      width: 100%;
      height: 12px;
      background-color: #7aa3f5;
      transform: skew(-30deg);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 创建一个矩形 */
    }
    .nd-3 {
      flex: 1;
      margin-left: 10px;
      width: 100%;
      height: 12px;
      transform: skew(-30deg);
      background-color: #2265ee;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 创建一个矩形 */
    }
  }
  .drawer-content-item-tm1 {
    display: flex;
    margin-top: 24px;
    p {
      font-size: 16px;
      margin-left: 8px;
    }
  }
}
.active-col {
  background: #2265ee !important;
  color: #fff !important;
}
.drawer-bottom-btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 78px;
  text-align: right;
  box-shadow: 0px -5px 10px 0px #f6f8fc;
  background-color: #fff;
  .el-button {
    margin-top: 20px;
    width: 100px;
    height: 40px;
  }
}
.drawer-bottom-add {
  position: absolute;
  bottom: 90px;
  width: 90%;
  margin-left: 5%;
  height: 80px;
  box-shadow: 0px 2px 24px -8px rgba(109, 123, 222, 0.5);
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
  font-size: 16px;
  border: 1px solid #2265ee;
  i {
    margin-top: 18px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border: 1px dashed #9f9f9f;
  }
  p {
    font-size: 14px;
    color: #2265ee;
    margin-top: 8px;
  }
}
</style>
